<template>
    <div class="stop-pause-view">

      <el-form ref="form" :model="datas" :rules="rules" class="demo-form-inline" label-width="100px" size="medium" label-position="left">

        <el-form-item label="申请类型" prop="stop_type">
          <el-select v-if="!pause" placeholder="请选择申请类型" v-model="datas.stop_type">
            <el-option
              v-for="item in types"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

          <div v-else>项目终止</div>
        </el-form-item>

        <el-form-item :label="datas.stop_type == 1 ? '暂停原因' : '终止原因'" prop="reason_id">
          <el-select v-model="datas.reason_id" placeholder="请选择原因" @change="reasonChange">
            <el-option
              v-for="item in reasons"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="详细描述" prop="work_content">
          <div class="textarea">
            <el-input
              placeholder="请输入详细描述"
              v-model="datas.description"
              type="textarea"
              :rows="2">
            </el-input>
          </div>

        </el-form-item>

        <el-form-item label="上传附件">
          <upload ref="upload" :project-data="projectData" :limit="limit" @uploadSuccess="uploadSuccess" @deleteSuccess="deleteSuccess" />
        </el-form-item>


      </el-form>

    </div>
</template>

<script>
    export default {
        name: "stopAndPauseView",
        props: {
            project:Object,
            pause:{
                type:Boolean,
                default:function () {
                    return false
                }
            }
        },
        data:function () {
            return{
                rules: {
                    stop_type: [
                        { required: true, message: '请选择申请类型', trigger: 'change' }
                    ],
                    reason_id: [
                        { required: true, message: '请选择申请原因', trigger: 'change' }
                    ],
                },
                limit:3,
                datas:{
                    project_id:'',
                    stop_type:1,
                    reason_id:'',
                    reason_string:'',
                    description:'',
                    files:[],
                },
                types:[
                    {
                        label:"项目暂停",
                        value:1,
                    },
                    {
                        label:'项目终止',
                        value:2
                    }
                ],
                reasons:[
                    {
                        label:"市场变化",
                        value:1,
                    },
                    {
                        label:'公司战略调整',
                        value:2
                    },
                    {
                        label:'技术难关',
                        value:3
                    }
                ],
                projectData:{},
            }
        },
        mounted() {
            this.datas.project_id = this.project.id;

            this.projectData.project_id = this.id;
            this.projectData.validation = true;

            if (this.pause){
                this.datas.stop_type = 2;
            }
        },
        methods:{
            validateFun:function(){
                return new Promise(((resolve, reject) => {
                    this.$refs.form.validate((valid) => {
                        if (valid){
                            this.datas.files.forEach(item=>{item.project_id = this.project.id;item.project_name = this.project.project_name;})
                            resolve()
                        }else {
                            reject()
                        }
                    });
                }))
            },
            reasonChange:function (value) {
                let index = this.reasons.findIndex(a=>a.value == value)
                if (index != -1){
                    this.datas.reason_string = this.reasons[index].label;
                }
            },
            uploadSuccess(file) {
                this.datas.files = this.$refs.upload.emitFileList()
            },
            deleteSuccess(aa) {
                this.datas.files = this.$refs.upload.emitFileList()
            },
        }
    }
</script>

<style scoped>

</style>
